<template>
  <div class="article_box">
    <!-- 底部区域 -->
    <div class="article_btnbox">
      <span slot="footer" class="dialog-footer">
        <el-button @click="closePage()">取 消</el-button>
        <el-button type="primary" @click="ListConfirm()">确 定</el-button>
      </span>
    </div>
    <!-- 内容主体区域 -->
    <el-form ref="ruleForm" label-width="80px">
      <el-form-item label="标题" required>
        <el-input v-model="articleData.title" />
      </el-form-item>
      <el-form-item label="作者">
        <el-input v-model="articleData.author" />
      </el-form-item>
      <el-form-item label="文章类型" required>
        <el-input v-model="articleData.articeType" disabled style="width: 100px;" />
      </el-form-item>

      <el-form-item label="开启评论" required>
        <el-radio-group v-model="articleData.is_comment">
          <el-radio label="1">是</el-radio>
          <el-radio label="2">否</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="发布日期" required>
        <el-radio v-model="articleData.radioPub" label="1">立即发布</el-radio>
        <el-radio v-model="articleData.radioPub" label="2">定时发布</el-radio>
        <!-- :disabled="datePickerVisible"  -->
        <el-date-picker
          v-model="articleData.publish_date"
          :disabled="datePickerVisible"
          class="date-picker"
          type="date"
          placeholder="选择日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptionsAdd"
        />
      </el-form-item>
      <!-- 发布范围 -->
      <RangeSelect ref="rangeSelect" />

      <el-form-item label="公告内容" style="margin-bottom: 30px;">
        <Tinymce ref="editor" v-model="articleData.content" :height="400" />
        <span>sdsd</span>
        <!-- <el-input v-model="addList.content"></el-input> -->
        <Tinymce-Editor ref="tinymceEditorRef" v-model="articleData.content" />
      </el-form-item>
      <!-- <el-form-item prop="image_uri" style="margin-bottom: 30px;">
                <Upload v-model="articleData.image_uri" />
            </el-form-item> -->

    </el-form>

  </div>
</template>
<script>
import { addNoticeList, editNoticeList, fetchArticle } from '@/api/newUsertest'
import Tinymce from '@/components/Tinymce'
import TinymceEditor from '@/components/Tinymce1'
import Upload from '@/components/Upload/SingleImage'
import RangeSelect from './components/rangeSelect.vue'

export default {
  components: { Tinymce, Upload, RangeSelect, TinymceEditor },
  data() {
    return {
      // 文章数据
      articleData: {
        title: '',
        content: '',
        articeType: '文档',
        radioPub: '1',
        is_comment: '1', // 状态
        publish_date: '',
        operate_time: '',
        checkList: [],
        publishRange: {},
        ordinaryPub: 0
      },

      // 文章是新增或编辑状态
      articleType: '',
      // 发布时间只能在今天以及今天之后
      pickerOptionsAdd: {
        // disabledDate (time) {
        //     return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
        // }
      }
    }
  },
  computed: {
    datePickerVisible() {
      if (this.articleData.radioPub === '1') {
        this.articleData.publish_date = new Date().format('yyyy-MM-dd')
        return true
      } else {
        return false
      }
    }
  },
  created() {
    const id = this.$route.query.Id // this.$route.params && this.$route.params.id
    this.articleType = this.$route.query.type
    if (this.articleType == 'edit') {
      this.editContent(id)
    }
    // this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    // 编辑页赋值公告内容
    editContent(id) {
      console.log(id)
      // this.updateEdit(id)
      fetchArticle(id).then(response => {
        this.articleData = response.data
        // 发布范围回显
        console.log(this.articleData)
        this.$refs.rangeSelect.handleEditPageShow(this.articleData)
      }).catch(err => {
        console.log(err)
      })
    },
    ListConfirm() {
      if (this.articleType == 'edit') {
        this.editListConfirm()
      } else if (this.articleType == 'add') {
        this.addListConfirm()
      }
    },
    // 编辑保存公告内容
    editListConfirm() {
      var operate_time = new Date().format('yyyy-MM-dd hh:mm:ss')
      const rangeSelectVal = this.$refs.rangeSelect // 使用refs获取组件的元素
      editNoticeList({
        'title': this.articleData.title,
        'articeType': this.articleData.articeType,
        'content': this.articleData.content,
        'publish_date': this.articleData.publish_date,
        'is_comment': this.articleData.is_comment,
        'id': this.articleData.id,
        'author': this.articleData.author,
        'operate_time': operate_time,
        'operator': this.articleData.operator,
        'radioPub': this.articleData.radioPub,
        'visitNum': this.articleData.visitNum,
        'publishRange': rangeSelectVal.articleData.publishRange,
        'ordinaryPub': rangeSelectVal.articleData.ordinaryPub ? 1 : 0
      }).then(response => {
        if (response.code != 20000) {
          this.$message.error('编辑公告失败！')
        } else {
          this.$message.success('编辑公告成功！')
          // 关闭页面
          this.closePage()
        }
        console.log(response.data)
      })

      // this.getNoticeList()
    },
    // 确认新增数据
    addListConfirm() {
      var operate_time = new Date().format('yyyy-MM-dd')
      const rangeSelectVal = this.$refs.rangeSelect // 使用refs获取组件的元素
      if (this.articleData.title == '') {
        this.$message.error('请输入文章标题')
        return false
      }
      if (rangeSelectVal.articleData.checkList.length == 0 && rangeSelectVal.articleData.ordinaryPub == 0) {
        this.$message.error('请选择发布范围')
        return false
      }

      if (this.articleData.title != '') {
        addNoticeList({
          'title': this.articleData.title,
          'articeType': this.articleData.articeType,
          'content': this.articleData.content,
          'publish_date': this.articleData.publish_date,
          'is_comment': this.articleData.is_comment,
          'author': this.articleData.author,
          'operate_time': operate_time,
          'radioPub': this.articleData.radioPub,
          'publishRange': rangeSelectVal.articleData.publishRange,
          'ordinaryPub': rangeSelectVal.articleData.ordinaryPub ? 1 : 0
        }).then(response => {
          if (response.code != 20000) {
            this.$message.error('添加公告失败！')
          } else {
            this.$message.success('添加公告成功！')
            // 关闭页面
            this.closePage()
          }
          console.log(response.data)
        })
      }

      // this.addDialogVisible = false
      // this.getNoticeList()
    },
    closePage() {
      var currentView = this.$store.state.tagsView.visitedViews[0]
      for (currentView of this.$store.state.tagsView.visitedViews) {
        if (currentView.path === this.$route.path) {
          break
        }
      }
      this.$store.dispatch('tagsView/delView', currentView)
        .then(({ visitedViews }) => {
          if (currentView.path === this.$route.path) {
            const latestView = this.$store.state.tagsView.visitedViews.slice(-1)[0]
            if (latestView) {
              this.$router.push(latestView)
            } else {
              // 如果没有其他标签则跳转到首页
              if (currentView.name === '首页') {
                this.$router.replace({ path: '/redirect' + currentView.fullPath })
              } else {
                this.$router.push('/')
              }
            }
          }
        })
    }

  }
}
</script>
<style lang="scss">
.article_box {
    padding: 20px;
    box-sizing: border-box;

    .article_btnbox {
        width: 100%;
        text-align: right;
        margin-bottom: 30px;
    }

    .date-picker {
        margin-left: 20px;
    }

    .mce-btn-has-text {
        border: 1px solid #000;
    }
}
</style>
